<template>
  <div class="container">
    <div class="p-3 border rounded-3 shadow m-3">
      <p>999999999{{ name }}</p>
      <label class="form-label" for="name">用户名</label>
      <input type="text" id="name" class="form-control" :value="name">
      <p></p>
      <button class="btn btn-primary" @click="increment">count:{{ count }}</button>
    </div>

  </div>

</template>

<script setup lang="ts">
import {ref} from "vue";
const count = ref(0);
const name = ref("hello");
function increment() {
  count.value++;// 在 JavaScript 中需要 .value
}
</script>

<!--<script>-->
<!--import {ref} from "vue";-->
<!--export default {-->
<!--  setup() {-->
<!--    const count = ref(0);-->
<!--    const name = ref("");-->
<!--    function increment() {-->
<!--      console.log(count.value);-->
<!--      count.value++;-->
<!--    }-->
<!--    return {-->
<!--      name,-->
<!--      count,-->
<!--      increment-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</sc>-->



